<template>
  <div class="grid-view" ref="gridView">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "GridView",
  props: {
    cols: {
      type: Number,
      default: 2
    },
    hMargin: {
      type: Number,
      default: 8
    },
    vMargin: {
      type: Number,
      default: 8
    },
    itemSpace: {
      type: Number,
      default: 8
    },
    lineSpace: {
      type: Number,
      default: 8
    }
  },
  mounted() {
    setTimeout(this._autoLayout, 20);
  },
  updated() {
    this._autoLayout();
  },
  methods: {
    _autoLayout() {
      //1. 获取gridEl和children
      // 注:这里为什么不用document.querySelector呢?
      //答:因为如果在项目中,多处都用到了grid-view,那么这里就不确定获取的是那一个了
      let gridEl = this.$refs.gridView;
      let children = gridEl.children;

      //2.设置gridEl的内边距
      gridEl.style.padding = `${this.vMargin}px ${this.hMargin}px`;

      //3.计算item的宽度
      let itemWidth =
        (gridEl.clientWidth -
          2 * this.hMargin -
          (this.cols - 1) * this.itemSpace) /
        this.cols;
      for (let i = 0; i < children.length; i++) {
        let item = children[i];
        item.style.width = itemWidth + "px";
        // if ((i + 1) % this.cols !== 0) {
        //   item.style.marginRight = this.itemSpace + "px";
        // }
        if (i > this.cols) {
          item.style.marginTop = this.lineSpace + "px";
        }
      }
    }
  }
};
</script>

<style scoped>
.grid-view {
  display: flex;
  flex-wrap: wrap;
}
</style>
